<template>
  <!--插入视频弹出框-->
  <transition name="scale" appear>
    <el-dialog
      v-if="customVideo.visible"
      title="插入视频信息"
      :visible.sync="customVideo.visible"
      append-to-body
      show-close
      custom-class="tinymce"
      :before-close="resetCustomVideo"
      width="480px"
    >
      <div class="dialog__body-nav">
        <div
          :class="{ 'dialog__nav-item-active': customVideo.active == 1, 'dialog__nav-item': true }"
          @click.stop="customVideo.active = 1"
        >
          常规
        </div>
        <div
          :class="{ 'dialog__nav-item-active': customVideo.active == 2, 'dialog__nav-item': true }"
          @click.stop="customVideo.active = 2"
        >
          高级
        </div>
      </div>
      <div class="dialog__body--content">
        <div v-show="customVideo.active == 1" class="content__item">
          <div class="item__label">标题</div>
          <div class="item__content">
            <el-input v-model="customVideo.form.videoTitle" placeholder="请输入标题"> </el-input>
          </div>
          <div class="item__label required">视频地址</div>
          <div class="item__content">
            <el-input
              v-model="customVideo.form.videoUrl"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 8 }"
              placeholder="请输入视频地址"
            >
            </el-input>
          </div>
        </div>
        <div v-show="customVideo.active == 2" class="content__item">
          <div class="item__label">封面地址</div>
          <div class="item__content">
            <el-input
              v-model="customVideo.form.cover"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 8 }"
              placeholder="请输入封面地址"
            >
            </el-input>
          </div>
        </div>
        <div class="content__footer">
          <div class="tinymce-button tinymce-button--cancel" @click.stop="customVideo.visible = false">取消</div>
          <div class="tinymce-button" @click.stop="onSaveVideo">保存</div>
        </div>
      </div>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      customVideo: {
        visible: false,
        active: 1,
        form: {
          videoUrl: '',
          code: '',
          videoTitle: '',
          cover: ''
        }
      }
    }
  },

  methods: {
    /**
     * 暴露出去  展示
     * */
    show() {
      this.customVideo.visible = true
    },

    /**
     * 暴露出去  关闭
     * */
    hide() {
      this.resetCustomVideo()
    },

    resetCustomVideo() {
      this.customVideo = {
        ...this.customVideo,
        visible: false,
        active: 1,
        form: {
          videoUrl: '',
          videoTitle: '',
          code: '',
          cover: ''
        }
      }
    },

    /**
     * 添加视频
     * */
    onSaveVideo() {
      if (!this.customVideo.form.videoUrl) {
        this.$message.error('视频链接地址不能为空')
        return
      }
      let html = `<div class="custom-alipay-video" id="aliplay-${Number(
        new Date()
      )}" contenteditable="false" data-src="${this.customVideo.form.videoUrl}"  data-cover="${
        this.customVideo.form.cover
      }"></div>`
      if (this.customVideo.form.videoTitle) {
        html += `<h6 style="text-align: center;">${this.customVideo.form.videoTitle}</h6>`
      }
      this.$emit('on-add-video', html)
    }
  }
}
</script>

<style scoped lang="scss">
$button-primary-color: $--color-primary;
.dialog__body-nav {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  padding: 16px 16px;
  user-select: none;
  .dialog__nav-item {
    border-bottom: 2px solid transparent;
    color: rgba(34, 47, 62, 0.7);
    display: inline-block;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 8px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .dialog__nav-item-active {
    border-bottom: 2px solid $button-primary-color;
    color: $button-primary-color;
    background-color: rgba(32, 122, 183, 0.1);
  }
}
.dialog__body--content {
  min-height: 201px;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  max-height: 650px;
  overflow: auto;
  padding: 10px 16px 20px 16px;
  .content__item {
    .item__label {
      line-height: 32px;
      position: relative;
    }
    .required {
      padding-left: 8px;
      &:before {
        content: '*';
        position: absolute;
        left: 0;
        font-size: 14px;
        top: 50%;
        color: red;
        transform: translateY(-50%);
      }
    }
    .item__content {
      margin-bottom: 10px;
    }
  }
  .content__footer {
    text-align: right;
    margin-top: 30px;
  }
}
</style>
